<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-05-02 12:55:23
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-05-02 12:55:23
-->
<template>
  <div>
    <el-select v-model="province" placeholder="省份" @change="getUrban">
      <el-option
        :label="p.name"
        :value="p.id + '-' + p.name"
        v-for="(p, index) in provinces"
        :key="index"
      ></el-option>
    </el-select>
    <el-select v-model="urban" placeholder="市区" @change="getTown">
      <el-option
        :label="u.name"
        :value="u.id + '-' + u.name"
        v-for="(u, index) in urbans"
        :key="index"
      ></el-option>
    </el-select>
    <el-select v-model="town" placeholder="县城" @change="res">
      <el-option
        :label="t.name"
        :value="t.id + '-' + t.name"
        v-for="(t, index) in towns"
        :key="index"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
import { findProvince, findUrban, findTown } from "../../api/area.js";
export default {
  name: "Area",
  data() {
    return {
      province: "",
      urban: "",
      town: "",
      provinces: [],
      urbans: [],
      towns: [],
    };
  },
  created() {
    findProvince()
      .then((result) => {
        this.provinces = result.data;
      })
      .catch((err) => {});
  },

  methods: {
    res(val) {
      console.log(val.indexOf("-"));
    },
    getUrban(val) {
      console.log(val);
      findUrban(val)
        .then((result) => {
          this.urbans = result.data;
        })
        .catch((err) => {});
    },
    getTown(val) {
      findTown(val)
        .then((result) => {
          this.towns = result.data;
        })
        .catch((err) => {});
    },
  },
};
</script>

<style></style>
